<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>足球端移动端布局</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        html, body{
            height: 100%;
            font-size: 20px;
        }
        body{
            display: flex;
            flex-direction: column;
        }

        header{
            height: 2.2rem;
            background: #0cc400;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        header div{
            width: 3rem;
            height: 1.25rem;
            line-height: 1.25rem;
            text-align: center;
            font-size: .6rem;
        }
        header div:nth-child(1){
            border-radius: .6rem 0 0 .6rem;
            background: #63d985;
            color: white;
        }
        header div:nth-child(2){
            border-radius: 0 .6rem .6rem 0;
            background: #3dd066;
            color: #a9e4b4;
        }

        section{
            flex: 1;
            overflow: auto;
        }
        .nav{
            display: flex;
            position: sticky;
            top: 0;
            background: white;
        }
        .nav li{
            text-align: center;
            height: 1.75rem;
            line-height: 1.75rem;
            flex: 1;
            border-bottom: .05rem solid #d9d9d9;
            box-sizing: border-box;
            color: #8c8c8c;
            font-size: .7rem;
        }
        .nav li:hover{
            border-bottom: .1rem solid #08c63e;
            color: #14bf4d;
        }
        .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .list div{
            width: 49%;
            display: flex;
            flex-direction: column;
            margin-top: .2rem;
            border: .05rem solid gray;
        }
        .list img{
            width: 100%;
            height: 5.5rem;
        }
        .list p{
            text-indent: .5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: .6rem;
        }

        .footer{
            height: 2.2rem;
            display: flex;
            color: #d5d5d7;
        }
        .footer div{
            flex: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .footer div:hover{
            color: #08ca43;
        }
        .footer i{
            height: 1.05rem;
            line-height: 1.05rem;
            font-size: .8rem;
            text-align: center;
        }
        .footer span{
            height: .85rem;
            line-height: .85rem;
            font-size: .6rem;
            text-align: center;
        }
        .footer div:nth-child(3){
            position: relative;
        }
        .footer div:nth-child(3) i{
            width: 2.5rem;
            height: 2.5rem;
            border: .05rem solid #dadada;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            margin-left: -1.25rem;
            top: -0.4rem;
            font-size: 1.5rem;
            line-height: 2.5rem;
            background: white;
        }
        .icon-font{
            font-size: .8rem;
        }
    </style>
      <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 320 * 20 + "px";
    </script>
</head>
<body>
    <header>
        <div>热点</div>
        <div>关注</div>
    </header>
    <section>
        <ul class="nav">
            <li>足球现场</li>
            <li>足球生活</li>
            <li>足球美女</li>
        </ul>
        <div class="list">
            <div>
                <img src="img/1.jpg" alt="">
                <p>万花筒-佐助</p>
            </div>
            <div>
                <img src="img/2.jpg" alt="">
                <p>晓组织天团</p>
            </div>
            <div>
                <img src="img/3.jpg" alt="">
                <p>装逼二柱子</p>
            </div>
            <div>
                <img src="img/4.jpg" alt="">
                <p>傀儡之王-蝎</p>
            </div>
            <div>
                <img src="img/5.jpg" alt="">
                <p>宇智波-带土</p>
            </div>
            <div>
                <img src="img/6.jpg" alt="">
                <p>君麻吕</p>
            </div>
            <div>
                <img src="img/7.jpg" alt="">
                <p>波风水门</p>
            </div>
            <div>
                <img src="img/8.jpg" alt="">
                <p>千手柱间</p>
            </div>
        </div>
    </section>
    <footer class="footer">
        <div>
            <i class="iconfont icon-shouye"></i>
            <span>首页</span>
        </div>
        <div>
            <i class="iconfont icon-faxian"></i>
            <span>发现</span>
        </div>
        <div>
            <i class="iconfont icon-zhaoxiangji"></i>
        </div>
        <div>
            <i class="iconfont icon-wode"></i>
            <span>我的</span>
        </div>
        <div>
            <i class="iconfont icon-tuichu"></i>
            <span>退出</span>
        </div>
    </footer>
</body>
</html>